<template>
	<app-layout>
		<view>
			<view class="basicf">
				<view class="fbottom">
					<view class="fname">店铺名</view>
					<input type="text" class="input" placeholder="请输入本人真实姓名作为店名" :value="name" @blur="blur"
						placeholder-style="color:#fa2424" :disabled="disabled" />
				</view>
				<view class="fbottom">
					<view class="fname">精品店头像</view>
					<view class="input">
						<view class="logoStore" v-if="islogo == true">
							<view mode="aspectFill" v-if="status == 2 || status == 3" @click='remove(0)'
								class='remove cross-center main-center'>x</view>
							<image class="image" :src="logoStore" @click='previewImage(0)'></image>
						</view>
						<app-upload-image @cancelon="can" v-else height="170" minheight="170" :islogo="false"
							:value="logoStore" :showNumber="false" @image-event="uploadlogo" maxNum="1" margin="0">
						</app-upload-image>
					</view>
				</view>
				<view class="fbottom">
					<view class="fname">手机号</view>
					<input type="number" class="input" placeholder="请输入联系电话" :value="phone" @blur="phoneblur"
						placeholder-style="style" :disabled="disabled" />
				</view>
				<view class="fbottom">
					<view class="fname">地址</view>
					<picker class="input" mode="region" @change="regionChange" :value="region" :disabled="disabled">
						<view>{{regionid.length == 0?'请选择所在地区':address}}</view>
					</picker>
				</view>
			</view>
			<view class="basicf">
				<view class="fbottom">
					<view class="fname">个人简介</view>
					<textarea class="input" placeholder="请输入个人简介(仅此一次，不可修改)" placeholder-class="peditext"
						name="introduction" @input="introcon" style="height:144rpx" :value="introduction"
						:disabled="disabled" maxlength="-1"></textarea>
				</view>
			</view>
			<view class="befbutton" v-if="status == -1">
				<button class="fbutton bgbut" @click="formSubmit">提交</button>
			</view>
			<view class="befbutton" v-if="status == 2 || status == 3 || (mch_id != 0 && is_default == 1)">
				<button class="fbutton bgbut" @click="formRepeatSubmit">提交</button>
			</view>
			<!-- 8.24 -->
			<view class="fvideo">
				<view class="video" v-for="(item,index) in vlist" :key="index">
					<image :src="item.cover_pic" @click="videoat(item)" class="img"></image>
				</view>
				<view v-if="isvideo" class="isvideo" @touchmove.stop.prevent="moveStop">
					<video :autoplay="true" :loop="true" :show-fullscreen-btn="false" class="video-cover" :src="vurl"
						controls></video>
					<image class="close" @click="videoup" src="../../../static/image/icon/clear.png" mode="">
					</image>
				</view>
			</view>
			<view class="illustration" :class="illheight > '20' && !isexpand ? 'expand ' : 'putaway '">
				<app-rich-text :content="article"></app-rich-text>
			</view>
			<view class="isexpand" v-if="illheight > '20'" :class="isexpand ? 'yesexpand' : 'noexpand'"
				@click="graphic">
				<view class="expland">
					{{ isexpand ? '收起' : '展开'}}
				</view>
			</view>
		</view>
		<view v-if="refer">
			<view class="sub">
				<view class="subsuc">
					<view class="subimgs subimgone">
						<image src="../../../static/image/index/subsuc.png" class="subimage"></image>
					</view>
					<view class="subdatasuc subdataone">
						资料提交成功
					</view>
					<view class="subdatati">
						结果将在1-2工作日反馈
					</view>
					<view class="submittwo" @click="cancel">
						我知道了
					</view>
				</view>
			</view>
		</view>
		<view v-if="undreview">
			<view class="sub">
				<view class="subsuc">
					<view class="subimgs subimgone">
						<image src="../../../static/image/index/subsuc.png" class="subimage"></image>
					</view>
					<view class="subdatasuc subdataone">
						正在审核中
					</view>
					<view class="subdatati">
						结果将在1-2工作日反馈
					</view>
					<view class="submittwo" @click="cancel">
						我知道了
					</view>
				</view>
			</view>
		</view>
		<view v-if="subsuc">
			<view class="sub">
				<view class="subsuc">
					<view class="subimgs subimgtwo">
						<image src="../../../static/image/index/appsuc.png" class="subimage"></image>
					</view>
					<view class="subdatasuc subdatatwo">
						申请成功
					</view>
					<view class="submittwo" @click="jump('/pages/store/mine/mine')">
						查看我的小店
					</view>
					<view class="submit-look" @click="cancel">
						查看提交内容
					</view>
				</view>
			</view>
		</view>
		<view v-if="failed">
			<view class="sub">
				<view class="subsuc">
					<view class="subimgs subimgtwo">
						<image src="../../../static/image/index/subsuc.png" class="subimage"></image>
					</view>
					<view class="subdatasuc subdatatwo">
						申请失败
					</view>
					<view class="submittwo" @click="cancel">
						请重新提交申请
					</view>
				</view>
			</view>
		</view>
		<view v-if="reminder">
			<view class="sub">
				<view class="subsuc">
					<view class="subimgs subimgone">
						<image src="../../../static/image/index/subsuc.png" class="subimage"></image>
					</view>
					<view class="subdatasuc subdataone">
						后台总经理更换时间到了，更换仓库中
					</view>
					<view class="submittwo" @click="cancel">
						我知道了
					</view>
				</view>
			</view>
		</view>
		<view v-if="exchangeware">
			<view class="sub">
				<view class="subsuc">
					<view class="subimgs subimgone">
						<image src="../../../static/image/index/subsuc.png" class="subimage"></image>
					</view>
					<view class="subdatasuc subdataone">
						正在更换精品店经理
					</view>
					<view class="submittwo" @click="cancel">
						我知道了
					</view>
				</view>
			</view>
		</view>
		<view :style="{height: BotHeight + 'rpx'}"></view>
	</app-layout>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	import appRichText from "../../../components/basic-component/app-rich/parse.vue";
	import appUploadImage from '../../../components/basic-component/app-upload-image/app-upload-image'
	// 禁止重复提交 9.2
	let repid = 0
	// 是否分享
	let isFromShare = false

	export default {
		name: "apply",
		data() {
			return {
				mch_id: 0,
				m_id: 0,
				status: -1,
				pepo_count: 0,

				name: '',
				phone: '',
				region: [],
				regionid: [],
				address: '',
				idJust: '',
				idBack: '',
				isjust: false,
				isback: false,
				logoStore: '',
				islogo: false,

				mchdetail: '',

				// 视频吸顶
				fixed: false,
				offsetTop: 0,
				videoContext: {},
				// 图文展开收起
				illheight: 0,
				isexpand: false,
				task: false,
				refer: false,
				undreview: false,
				subsuc: false,
				failed: false,
				reminder: false,
				disabled: true,
				applysuc: false,

				imgprefix: this.$siteInfo.imgroot,

				article: '',

				indeximg: '',
				checkimg: '',
				moreimg: [],
				inimg: '',

				upvipic: false,

				islookimg: false,

				introduction: '',

				isvideo: false,
				topic: '',

				// isFromShare: false,

				is_default: 0,
				exchangeware: false,

				// 8.24
				vlist: [],
				vurl: ''

			}
		},
		components: {
			'app-rich-text': appRichText,
			appUploadImage
		},
		onLoad: function(options) {
			repid = 0
			this.cancel()
			// 首页截图，分享后的
			this.imgReq()
			// 8.24 视频请求
			this.loadData()
			// console.log(options);
			// 视频文字
			this.storeapp()
			this.mch_id = options.mch_id ? options.mch_id : this.mch_id
			if (options.mch_id) {
				this.m_id = options.mch_id
			}

			if (options.mch_id) {
				// 仓库信息
				this.appdetail(options.mch_id)
			}

			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onShareAppMessage() {
			isFromShare = true
			return this.$shareAppMessage({
				title: '免费成为双熙堂珠宝合伙人',
				path: '/pages/index/index',
				imageUrl: this.inimg,
				params: {

				}
			});
		},
		onShareTimeline() {
			isFromShare = true
			return this.$shareTimeline({
				title: '免费成为双熙堂珠宝合伙人',
				query: {

				}
			});
		},
		onReady: function() {
			this.videoContext = uni.createVideoContext('myVideo');
		},
		onShow() {
			if (isFromShare) {
				isFromShare = false;
				return;
			}
			this.isApply()
			// 刷新任务度
			this.$store.dispatch('user/refresh');
		},
		onHide() {
			clearTimeout()
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info,
				appSetting: state => state.mallConfig.mall.setting
			}),
			...mapGetters('iPhoneX', {
				BotHeight: 'getBotHeight',
				getNavHei: 'getNavHei',
			}),
		},
		mounted() {
			let obj = uni.createSelectorQuery().in(this);
			obj.select('.illustration').boundingClientRect((data) => {
				// console.log(data, 'this,heidhrhd');
				this.illheight = data.height
			}).exec()

			this.$request({
				url: this.$api.share.index,
			}).then(response => {
				if (response.code === 0) {
					if (res.data.list.team_count > 0) {
						this.pepo_count = res.data.list.team_count
						this.userInfo.share_schedule = res.data.list.team_count
					}
				} else {

				}
			}).catch(() => {

			});
		},
		methods: {
			// 8.24 刷新任务进度条
			refresh() {
				this.$store.dispatch('user/refresh');
				this.status = 5
			},
			remove(index) {
				if (index == 1) {
					this.idJust = ''
					this.isjust = false
				} else if (index == 2) {
					this.idBack = ''
					this.isback = false
				} else if (index == 0) {
					this.logoStore = ''
					this.islogo = false
				}
			},
			videoat(item) {
				this.isvideo = true
				this.vurl = item.vdetail[0].url
			},
			videoup() {
				this.isvideo = false
			},
			lookat() {
				this.islookimg = true
			},
			lookup() {
				this.islookimg = false
			},
			moveStop() {

			},
			introcon(e) {
				this.introduction = e.detail.value
			},
			previewImage(index) {
				this.upvipic = true
				if (index == 0) {
					uni.previewImage({
						current: this.logoStore,
						urls: this.logoStore.split(',')
					})
				} else if (index == 1) {
					uni.previewImage({
						current: this.idJust,
						urls: this.idJust.split(',')
					})
				} else if (index == 2) {
					uni.previewImage({
						current: this.idBack,
						urls: this.idBack.split(','),
					})
				} else if (index == 3) {
					uni.previewImage({
						current: this.indeximg,
						urls: this.indeximg.split(','),
					})
				}
			},
			can(e) {
				this.upvipic = e
			},
			uploadlogo(e) {
				this.logoStore = e.imageList[0]
			},
			storeapp() {
				this.$request({
					url: this.$api.article.detail,
					data: {
						article_id: 1
					}
				}).then(res => {
					this.article = res.data.article.content
				})
			},
			isApply() {
				let self = this
				if (self.userInfo.vdian_id != null) { // 已有开店数据
					if (this.upvipic) {
						// this.upvipic = false
						return;
					}
					self.appStatus(self.userInfo.vdian_id)
					self.applysuc = true
				} else { // 没有开店数据
					if (self.mch_id == 0) { // 小店
						// 请求数据
						self.appStatus()
						// self.status = 5
					} else { // 精品店
						self.status = -1
						self.disabled = false
					}
				}
			},
			stickyVideo() {

			},
			// 收起展开
			graphic() {
				this.isexpand = !this.isexpand
			},
			// 取消弹框
			cancel() {
				this.isexpand = false
				this.undreview = false
				this.subsuc = false
				this.failed = false
				this.reminder = false
				this.task = false
				this.exchangeware = false
			},
			// 跳转
			jump(item, id) {
				uni.navigateTo({
					url: item + '?id=' + id
				})
			},
			// 鼠标点击其他地方获取input内内容
			blur(e) {
				this.name = e.target.value
			},
			phoneblur(e) {
				this.phone = e.target.value
			},
			// 地址选择
			regionChange(e) {
				this.region = e.target.value
				this.regionid = e.target.code
				this.address = e.target.value.join('-')
			},
			//SUBMIT
			formSubmit: function(e) {
				const self = this;
				// console.log(self.name, self.region, self.idJust, self.idBack, 666666);
				if (!self.name) {
					uni.showToast({
						title: "店铺名称不能为空",
						icon: 'none'
					});
					return;
				}
				if (!self.phone) {
					uni.showToast({
						title: "联系电话不能为空",
						icon: 'none'
					});
					return;
				}
				if (!(/^1[23456789]\d{9}$/).test(self.phone)) {
					uni.showToast({
						title: "联系电话格式不正确",
						icon: 'none'
					});
					return;
				}
				if (self.mch_id != 0) {
					if (self.logoStore == '' || self.logoStore == undefined) {
						uni.showToast({
							title: '请上传精品店的图像',
							icon: "none"
						})
						return
					}
				}
				if (self.regionid.length == 0) {
					uni.showToast({
						title: '请选择您的地址',
						icon: "none"
					})
					return
				}
				if (!self.introduction) {
					uni.showToast({
						title: '个人简介不能为空',
						icon: "none"
					})
					return
				}
				// 普通链接
				let aurl = self.$api.apply.store
				if (self.mch_id == 0) {
					if (self.userInfo.share_schedule < 10) {
						// 小店任务未完成时
						aurl = self.$api.apply.store + '&tempapply=1'
						// return
					}
				}
				/* if (self.idJust == '' || self.idJust == undefined) {
					uni.showToast({
						title: '请上传身份证正面照',
						icon: "none"
					})
					return
				}
				if (self.idBack == '' || self.idJust == undefined) {
					uni.showToast({
						title: '请上传身份证反面照',
						icon: "none"
					})
					return
				}
				let idImages = ""
				idImages = self.idJust + ',' + self.idBack */
				if (repid == 0) {
					repid++;
					self.$request({
						url: aurl,
						data: {
							name: self.name,
							mobile: self.phone,
							address: self.address,
							// pic_url: idImages,
							mch_id: self.mch_id,
							province_id: self.regionid[0],
							city_id: self.regionid[1],
							district_id: self.regionid[2],
							cover_url: self.logoStore,
							description: self.introduction
						},
						method: 'POST',
					}).then(res => {
						// console.log(res);
						if (res.code == 0) {
							self.name = res.data.name
							self.userInfo.vdian_id = res.data.id
							if (self.mch_id == 0) { // 小店
								if (self.userInfo.share_schedule >= 10) { // 任务完成
									self.isexpand = true
									self.appStatus(res.data.id)
								} else { // 任务未完成
									self.task = true
									self.status = 5
									self.appStatus(0)
								}
							} else { // 精品店
								self.isexpand = true
								self.appStatus(res.data.id)
							}

							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						} else {
							repid = 0
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					}).catch(e => {
						repid = 0
					})
				}
			},
			formRepeatSubmit: function(e) {
				const self = this;
				if (!self.name) {
					uni.showToast({
						title: "店铺名称不能为空",
						icon: 'none'
					});
					return;
				}
				if (!self.phone) {
					uni.showToast({
						title: "联系电话不能为空",
						icon: 'none'
					});
					return;
				}
				if (!(/^1[23456789]\d{9}$/).test(self.phone)) {
					uni.showToast({
						title: "联系电话格式不正确",
						icon: 'none'
					});
					return;
				}
				if (self.logoStore == '' || self.logoStore == undefined) {
					uni.showToast({
						title: '请上传精品店的图像',
						icon: "none"
					})
					return
				}
				if (self.regionid.length == 0) {
					uni.showToast({
						title: '请选择您的地址',
						icon: "none"
					})
					return
				}
				if (!self.introduction) {
					uni.showToast({
						title: '个人简介不能为空',
						icon: "none"
					})
					return
				}
				if (repid == 0) {
					repid++;
					self.$request({
						url: self.$api.apply.store,
						data: {
							id: self.userInfo.vdian_id,
							name: self.name,
							mobile: self.phone,
							address: self.address,
							// pic_url: idImages,
							mch_id: self.m_id != 0 ? self.m_id : self.mch_id,
							province_id: self.regionid[0],
							city_id: self.regionid[1],
							district_id: self.regionid[2],
							cover_url: self.logoStore,
							description: self.introduction
						},
						method: 'POST',
					}).then(res => {
						if (res.code == 0) {
							self.name = res.data.name
							self.isexpand = true
							self.userInfo.vdian_id = res.data.id
							self.appStatus(res.data.id)
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						} else {
							repid = 0
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					}).catch(e => {
						repid = 0
					})
				}
			},
			// id 默认为 0 精品店走到这一步必不为0
			appStatus(id = 0) {
				let self = this
				self.$request({
					url: self.$api.apply.store,
					data: {
						id: id
					},
					method: 'get',
				}).then(res => {
					// 没有提交过数据 
					if (res.data == null) {
						self.status = -1
						self.disabled = false
						return
					}
					self.disabled = true
					self.islogo = true
					self.mch_id = res.data.mch_id
					self.is_default = res.data.is_default
					// self.m_id = res.data.mch_id
					self.name = res.data.name
					self.phone = res.data.mobile
					self.logoStore = res.data.cover_url
					self.address = res.data.address
					self.regionid[0] = res.data.province_id
					self.regionid[1] = res.data.city_id
					self.regionid[2] = res.data.district_id
					self.introduction = res.data.description.replaceAll('<p>', '').replaceAll('</p>','')
					
					// 申请后有user vid的直接进入这一步
					if (res.data.is_delete == 0) {
						if (res.data.review_status == 0) {
							self.status = 0
							self.undreview = true
						} else if (res.data.review_status == 1) {
							self.status = 1
							if (res.data.is_default == 1) {
								self.exchangeware = true
							} else {
								self.subsuc = true
							}
						} else if (res.data.review_status == 2) {
							self.status = 2
							self.failed = true
							self.disabled = false
						} else if (res.data.review_status == 3) {
							self.status = 3
							self.reminder = true
							self.disabled = false
						}
					} else {
						self.status = 3
						self.reminder = true
						self.disabled = false
					}

					// console.log(res);
				}).catch(e => {

				})
			},
			appdetail(id) {
				let self = this
				self.$request({
					url: self.$api.mch.detail,
					data: {
						id: id
					}
				}).then(res => {
					// console.log(res);
					self.mchdetail = res.data.detail.store
				}).catch(e => {

				})
			},
			allReq() {
				this.$request({
					url: this.$api.navs.list,
					data: {
						pid: 751,
						status: 1
					}
				}).then((res) => {
					// console.log(res);
					this.indeximg = res.data.list[0].icon_url
					this.checkimg = res.data.list[1].icon_url
					if (res.data.list.length > 2) {
						this.moreimg = res.data.list
					}
				}).catch(() => {

				})
			},
			imgReq() {
				this.$request({
					url: this.$api.navs.list,
					data: {
						pid: 276,
						status: 1
					}
				}).then((res) => {
					this.inimg = res.data.list[0].icon_url
				}).catch(() => {

				})
			},
			closeForm() {
				this.form_status = false;
			},
			backIndex() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			loadData(id) {
				this.$request({
					url: this.$api.topic.list,
					data: {
						type: 41,
						page: 1,
						limit: 6,
					}
				}).then((res) => {
					// console.log(res);
					this.vlist = res.data.list
				}).catch(err => {

				})
				// 即将废弃（8.24） 废弃
				// // this.$showLoading();
				// this.$request({
				// 	url: this.$api.topic.detail,
				// 	data: {
				// 		id: id
				// 	}
				// }).then(res => {
				// 	// this.$hideLoading();
				// 	if (res.code == 0) {
				// 		// console.log(res);
				// 		this.topic = res.data.list
				// 	}
				// }).catch(e => {
				// 	// this.$hideLoading();
				// });
			},
		}
	}
</script>

<style lang="scss">
	.plugins-mch-apply-input {
		color: #bbb;
		font-size: #{28rpx};
	}
</style>
<style scoped lang="scss">
	/* 成为双熙堂合伙人 */
	.bepartner {
		width: 686rpx;
		height: 136rpx;
		margin: 20rpx 32rpx;
		position: relative;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.bebg {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.bebg image {
		height: 136rpx;
		width: 136rpx;
	}

	.beimg {
		width: 96rpx;
		height: 96rpx;
		position: absolute;
		left: 106rpx;
		top: 20rpx;
	}

	.beimg image {
		width: 96rpx;
		height: 96rpx;
	}

	.befont {
		position: absolute;
		left: 234rpx;
		line-height: 136rpx;
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
	}

	/* 表单 */
	.basicf {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 42rpx 0;
		width: 686rpx;
		background-color: #FFFFFF;
		margin: 32rpx auto;
		border-radius: 32rpx;
	}

	/* 身份证照片 */
	.fidmg {
		width: 550rpx;
		margin: 0 auto;
		border-bottom: 2rpx solid #F2F2F2;
		line-height: 72rpx;
		color: #333333;
	}

	.fidimgs {
		width: 550rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;

		.img-box {
			position: relative;
			margin-right: 20rpx;

			.remove {
				width: 40#{rpx};
				height: 40#{rpx};
				position: absolute;
				right: -16rpx;
				top: -10rpx;
				// background: $uni-important-color-red;
				background-color: #333333;
				color: #fff;
				border-radius: 50%;
				padding-bottom: 8#{rpx};
				font-size: 24#{rpx};
			}

			.img {
				width: 170rpx;
				height: 192rpx;

				display: block;
				border-radius: 16rpx;
			}
		}
	}

	.fbottom {
		width: 550rpx;
		margin: 0 auto;
		padding: 24rpx 0 0;
		line-height: 72rpx;
		border-bottom: 2rpx solid #F2F2F2;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333333;
	}

	.fbottom .fname {
		width: 176rpx;
	}

	.peditext {
		color: #999999;
	}

	.fbottom .input {
		width: 374rpx;
	}

	.fbottom .input .logoStore {
		width: 170rpx;
		height: 170rpx;
		position: relative;
	}

	.fbottom .input .logoStore .remove {
		width: 40#{rpx};
		height: 40#{rpx};
		position: absolute;
		right: -16rpx;
		top: -10rpx;
		// background: $uni-important-color-red;
		background: #333333;
		color: #fff;
		border-radius: 50%;
		padding-bottom: 8#{rpx};
		font-size: 24#{rpx};
	}

	.fbottom .input .logoStore .image {
		width: 100%;
		height: 100%;
	}

	.fbottom .input .logoStore.bg {
		background: #F4F4F4;
		position: relative;
	}

	.fbottom .input .logoStore .logoStore-hor {
		position: absolute;
		width: 80rpx;
		height: 2rpx;
		left: 48rpx;
		top: 87rpx;
		background: #FFFFFF;
	}

	.fbottom .input .logoStore .logoStore-ver {
		position: absolute;
		width: 80rpx;
		height: 2rpx;
		left: 48rpx;
		top: 87rpx;
		background: #FFFFFF;
		transform: rotate(90deg);
	}

	.fbottom .input.time {
		display: flex;
		align-items: center;
	}

	.fbottom .input .center {
		padding: 0 20rpx;
	}

	// 说明视频
	.fvideo {
		width: 686rpx;
		margin: 32rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	.video {
		// width: 686rpx;
		// height: 386rpx;
		width: 321rpx;
		height: 321rpx;
		margin: 32rpx 0;
		// border-radius: 32rpx;
		// overflow: hidden;

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.isvideo {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;

		.video-cover {
			width: 100%;
			height: 100%;
		}

		.close {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			width: 52rpx;
			height: 52rpx;
			z-index: 1000;
		}
	}

	// 图文说明
	.illustration {
		background-color: #FFFFFF;
		width: 686rpx;
		margin: 32rpx auto 0;
		padding: 42rpx 24rpx;
		border-radius: 32rpx;

		&.expand {
			height: 164rpx;
			overflow: hidden;
		}

		&.putaway {
			height: auto;
		}

		.image {
			width: 100%;
		}

		.text {
			width: 100%;
			text-align: justify;
			font-size: 28rpx;
		}
	}

	.isexpand {
		width: 100%;
		// height: 30rpx;
		height: 100rpx;
		color: $uni-important-color-black;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.expland {}

		.image {
			width: 15rpx;
			height: 15rpx;
		}

		.yesexpand {
			.image {
				transform: rotate(90deg);
			}
		}

		.noexpand {
			.image {
				transform: rotate(90deg);
			}
		}
	}

	// 任务完成度
	.task-completion {
		width: 686rpx;
		height: 48rpx;
		margin: 0 auto;
		font-size: 24rpx;
		color: #d50000;
	}

	.taskc {
		width: 686rpx;
		height: 510rpx;
		margin: 0 auto;
		background-size: contain;
		position: relative;

		.title {
			width: 180rpx;
			height: 54rpx;
			position: absolute;
			top: 112rpx;
			left: 50%;
			transform: translateX(-50%);
			font-size: 36rpx;
			line-height: 54rpx;
			color: #FFFFFF;
		}

		.refresh {
			height: 54rpx;
			border: 1rpx solid #FFFFFF;
			position: absolute;
			top: 178rpx;
			font-size: 28rpx;
			line-height: 54rpx;
			color: #FFFFFF;
			padding: 0 24rpx;
			right: 24rpx;
			border-radius: 50rpx;
		}

		.progrebar {
			position: absolute;
			width: 622rpx;
			// height: 148rpx;
			// height: 178rpx;
			margin: 0 auto;
			bottom: 0;
			display: flex;
			left: 32rpx;
			flex-wrap: wrap;
			justify-content: space-between;
		}
	}

	.pcre {
		display: flex;
		width: 100%;
	}

	.crefresh {
		height: 54rpx;
		border: 1rpx solid #342B2A;
		font-size: 28rpx;
		line-height: 54rpx;
		color: #342B2A;
		padding: 0 24rpx;
		border-radius: 50rpx;
		width: 126rpx;
	}

	.progress {
		background: #F5F5F5;
		border-radius: 24rpx;
		width: 100%;
		height: 48rpx;
		display: flex;
		align-items: center;
		margin-right: 10rpx;

		.progress-bar {
			background: linear-gradient(90deg, #FF978D 0%, #FF302F 100%);
			border-radius: 24rpx;
			height: 48rpx;
			color: #FFFFFF;
			font-size: 24rpx;
			line-height: 48rpx;
			text-align: center;
		}
	}

	.sharebut {
		width: 116rpx;
		height: 48rpx;
		border-radius: 24rpx;

		.sbutton {
			color: #FFFFFF;
			background: #CD9C62;
			line-height: 48rpx;
			font-size: 24rpx;
		}
	}

	.taskcom {
		font-size: 24rpx;
		line-height: 36rpx;
		color: #999999;
		width: 100%;
		text-align: center;
	}

	.taips {
		margin-bottom: 10rpx;
		font-size: 26rpx;
		line-height: 52rpx;
		color: #fa2424;
		width: 100%;
		text-align: center;
	}

	.probar {
		width: 686rpx;
		height: 20rpx;
		margin: 0 auto;
		display: flex;
		background: #fff;

		.probaritem {
			width: 686rpx;
			height: 20rpx;
			background-color: #CDCDCD;

			&.changed {
				background-color: #000;
			}

			&.nochange {
				background-color: #55aa7f;
			}
		}
	}

	.befbutton {
		background: #342B2A;
		border-radius: 64rpx;
		width: 686rpx;
		height: 88rpx;
		margin: 48rpx auto;
		overflow: hidden;
	}

	.fbutton {
		border-radius: 64rpx;
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-weight: bold;
		font-size: 36rpx;
	}

	.bsbut {
		color: #FFFFFF;
		background: #CD9C62;
	}

	.bgbut {
		background: #342B2A;
		color: #FFFFFF;
	}

	.bcbut {
		border: 1rpx solid #342B2A;
		color: #342B2A;
	}

	/* 资料提交成功 */
	.sub {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 666;
	}

	.comfail {
		width: 586rpx;
		height: 702rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #fff;
		box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.1);
		border-radius: 32rpx;
		padding: 0 32rpx;

		.comimgs {
			width: 240rpx;
			height: 240rpx;
			position: absolute;
			left: 174rpx;
		}

		.comimgone {
			top: -126rpx;
		}

		.comimage {
			width: 240rpx;
			height: 240rpx;
		}

		.comdatasuc {
			font-size: 28rpx;
			line-height: 54rpx;
			text-align: center;
			color: #666;
			margin-top: 132rpx;
		}

		.comdatati {
			font-size: 32rpx;
			line-height: 52rpx;
			text-align: center;
			color: #000;
			font-weight: 600;
		}

		.comdatati1 {
			font-size: 30rpx;
			color: #000;
		}

		.comdatati2 {
			margin-top: 32rpx;
			font-size: 32rpx;
			line-height: 56rpx;
			color: #fa2424;
		}

		.committwo {
			width: 368rpx;
			height: 96rpx;
			margin: 36rpx auto;
			background: #342B2A;
			box-shadow: 0px 8rpx 46rpx rgba(0, 0, 0, 0.1);
			border-radius: 64rpx;
			text-align: center;
			line-height: 96rpx;
			color: #fff;
		}

	}

	.subsuc {
		width: 586rpx;
		height: 566rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #fff;
		box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.1);
		border-radius: 32rpx;

		.submit-look {
			position: absolute;
			width: 368rpx;
			text-align: center;
			bottom: 24rpx;
			left: 50%;
			transform: translate(-50%, 0);
			font-size: 24rpx;
			color: #6c6c6c;
		}
	}

	.subimgs {
		width: 240rpx;
		height: 240rpx;
		position: absolute;
		left: 174rpx;
	}

	.subimgone {
		top: -96rpx;
	}

	.subimgtwo {
		top: 62rpx;
	}

	.subimage {
		width: 240rpx;
		height: 240rpx;
	}

	.subdatasuc {
		width: 520rpx;
		font-size: 36rpx;
		line-height: 54rpx;
		text-align: center;
		color: #000;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.subdataone {
		top: 208rpx;
	}

	.subdatatwo {
		top: 326rpx;
	}

	.subdatati {
		font-size: 28rpx;
		line-height: 42rpx;
		text-align: center;
		color: #666;
		position: absolute;
		top: 262rpx;
		// left: 150rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
	}

	.submittwo {
		position: absolute;
		width: 368rpx;
		height: 96rpx;
		left: 110rpx;
		top: 404rpx;
		background: #342B2A;
		box-shadow: 0px 8rpx 46rpx rgba(0, 0, 0, 0.1);
		border-radius: 64rpx;
		text-align: center;
		line-height: 96rpx;
		color: #fff;
	}

	// 原来的

	.result-title {
		color: #387ee8;
		font-size: #{28rpx};
		margin-top: #{32rpx};
	}

	.result-home {
		color: #666;
		font-size: #{28rpx};
		padding: #{24rpx};
	}

	.basicimg {
		width: 686rpx;
		font-size: 32rpx;
		text-align: center;
		line-height: 52rpx;
		margin: 32rpx auto;
		border-radius: 32rpx;

		.title {
			margin-bottom: 10rpx;
		}

		.seepic {
			font-size: 28rpx;
		}
	}

	.lookimg {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: #000000;
		z-index: 999;

		.image {
			width: 100%;
		}

		.close {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			width: 52rpx;
			height: 52rpx;
			z-index: 1000;
		}
	}
</style>
